<template>
	<div class="form-control">
		<el-form :model="clazz" label-width="auto">
			<el-form-item label="班级名称">
				<el-input
					 v-model="clazz.name"
					 type="text"
					 placeholder="请输入班级名称"
				  />
			</el-form-item>
			
			<el-form-item label="课程时长">
				<el-input v-model="clazz.duration" placeholder="请输入课程时长">
				    <template #append>月</template>
				</el-input>
			</el-form-item>
			
			<el-form-item label="班主任">
				<el-input
					 v-model="clazz.manage"
					 type="text"
					 placeholder="请输入班主任名称"
				  />
			</el-form-item>
			
		</el-form>
	</div>
</template>

<script>
export default {
	data(){
		return {
			clazz: {
				name: null,
				manage: null, 
				duration: null,
			}
		}
	},
	created() {
		window.$bus.on("add-clazz", this.saveClazz);
	},
	methods: {
		saveClazz(index) {
			// 保存班级信息 
			console.log(index) ;
			
			// 向 父页面 消息总线 发送 close-win 关闭窗口事件、通知父页面 关闭弹框
			// 父页面 监听 close-win , 并关闭该窗口
			parent.$bus.emit('close-win', index) ;
		}
	}
}
</script>

<style scoped>
.form-control {
	padding: 30px 30px 10px;
}
</style>